<template>
    <div class="tab-content">
        <el-form ref="sharedTravelFormRef" :model="sharedTravelForm" :rules="sharedTravelRules" label-width="150px" class="config-form">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="民用出行" prop="civilianTravel">
                        <el-input-number v-model="sharedTravelForm.civilianTravel" placeholder="请输入民用出行数量" :controls="false" :validate-event="true"/>
                        <!-- <span style="margin-left: 8px; color: #909399;">%</span> -->
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="商务出行" prop="businessTravel">
                        <el-input-number v-model="sharedTravelForm.businessTravel" placeholder="请输入商务出行数量" :controls="false" />
                        <!-- <span style="margin-left: 8px; color: #909399;">%</span> -->
                    </el-form-item>
                </el-col>
            </el-row>
            
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="长途出行" prop="longDistanceTravel">
                        <el-input-number v-model="sharedTravelForm.longDistanceTravel" placeholder="请输入长途出行数量" :controls="false"/>
                        <!-- <span style="margin-left: 8px; color: #909399;">%</span> -->
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="短途出行" prop="shortDistanceTravel">
                        <el-input-number v-model="sharedTravelForm.shortDistanceTravel" placeholder="请输入短途出行数量" :controls="false" />
                        <!-- <span style="margin-left: 8px; color: #909399;">%</span> -->
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="save-button-container">
            <el-button type="primary" @click="savesharedTravelData">保存出行数据配置</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { updateDataClassify } from '@/api/port'
    import { ElMessage } from 'element-plus'


    // 数字范围验证函数
    const validateNumber = (rule: any, value: number, callback: (error?: Error) => void) => {
        if (value === null || value === undefined) {
            callback(new Error('请输入数字'))
        } else if (value < 0) {
            callback(new Error('请输入大于等于0的数字'))
        } else if (value > 1000000) {
            callback(new Error('请输入小于等于1000000的数字'))
        } else {
            callback()
        }
    }
    // 表单验证规则
    const sharedTravelRules = {
        civilianTravel: [
            { required: true, message: '民用出行数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        businessTravel: [
            { required: true, message: '商务出行数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        longDistanceTravel: [
            { required: true, message: '长途出行数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ],
        shortDistanceTravel: [
            { required: true, message: '短途出行数量不能为空', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
        ]
    }
    // 模块2: 出行数据配置表单
    const sharedTravelForm = ref<{
        civilianTravel: number, 
        businessTravel: number, 
        longDistanceTravel: number, 
        shortDistanceTravel: number
    }>({
        civilianTravel: 0, // 民用出行
        businessTravel: 0, // 商务出行
        longDistanceTravel: 0, // 长途出行
        shortDistanceTravel: 0 // 短途出行
    })

    

    
    // 保存函数
    const sharedTravelFormRef = ref()
    const savesharedTravelData = async () => {
        if (!sharedTravelFormRef.value) return
        
        try {
            await sharedTravelFormRef.value.validate()
            await updateDataClassify({
                id: 4,
                key: 'module2',
                value: sharedTravelForm.value
            })
            console.log('保存出行数据配置:', sharedTravelForm.value)

            ElMessage.success('出行数据配置保存成功')
        } catch (error) {
            ElMessage.warning('请填写完整的表单信息')
        }
    }
    // 初始化函数
    const init = (module: any) => {
        console.log(module)
        if(module){
            sharedTravelForm.value = module
        }else{
            sharedTravelForm.value = {
                civilianTravel: 0, // 民用出行
                businessTravel: 0, // 商务出行
                longDistanceTravel: 0, // 长途出行
                shortDistanceTravel: 0 // 短途出行
            }
        }
    }
    defineExpose({
        init
    })

</script>
<style lang="less" scoped>

</style>